<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            list:[],
        },
        methods: {
            getData(){
                // var xhr = new XMLHttpRequest();
                // xhr.open("get","../js/shoppingCar.json",true);
                // xhr.send();
                // xhr.onreadystatechange = ()=>{
                //     if(xhr.readyState == 4 && xhr.status == 200){
                //         var res = JSON.parse(xhr.responseText);
                //         this.list = res;
                //     }
                // }

                // 原生JS新增 ajax(Promise版)
                fetch("../js/shoppingCar.json").then(res=>{
                    console.log(res);
                    return res.json();
                }).then((result)=>{
                    console.log(result);
                    this.list = result;
                })

            }
        },
        watch:{
            list:function(newVal,oldVal){
                console.log("list发生改变",newVal,oldVal);
            }
        },
        mounted() {
            // var xhr = new XMLHttpRequest();
            // xhr.open("get","../js/shoppingCar.json",true);
            // xhr.send();
            // xhr.onreadystatechange = ()=>{
            //     if(xhr.readyState == 4 && xhr.status == 200){
            //         var res = JSON.parse(xhr.responseText);
            //         this.list = res;
            //     }
            // }
            this.getData();
        },
    })

</script>
</html>